<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml"> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"> 
		<title>Google Maps JavaScript API Example: LocalSearch Control</title> 
		<style type="text/css"> 
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
}
		</style> 
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzhzfvJChFe-cxD2Hx0yPeRQehS25r_1c3Uy3rnYoYx3Q8y2vIRS7D2hQ7OG4BjNyX4HVTlYPHfH9CA"
type="text/javascript"></script>
		<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
		<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
		<script type="text/javascript">
			var map;
			var addressA;
			var addressB;
			var debut;
			var fin;
			var polyline;
		
			var baseIcon				= new GIcon(G_DEFAULT_ICON);
			baseIcon.shadow 			= "http://www.google.com/mapfiles/shadow50.png";
			baseIcon.iconSize 			= new GSize(20, 34);
			baseIcon.shadowSize 		= new GSize(37, 34);
			baseIcon.iconAnchor 		= new GPoint(9, 34);
			baseIcon.infoWindowAnchor 	= new GPoint(9, 2);

			function initialize() {
				if (GBrowserIsCompatible()) {
					map = new GMap2(document.getElementById("map_canvas"));
					var center = new GLatLng(48.80267, 2.62385);
					map.setCenter(center, 13);
					map.addControl(new GSmallMapControl());
					map.addControl(new GMenuMapTypeControl());
					map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
					
					debut 	= createMarker(center, 0);
					fin 	= createMarker(center, 1);
					map.addOverlay(debut);
					map.addOverlay(fin);
				}
			}
			function createMarker(point, index) {
				var letter 			= String.fromCharCode("A".charCodeAt(0) + index);
				var letteredIcon 	= new GIcon(baseIcon);
				letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
				var marker = new GMarker(point, { icon:letteredIcon, draggable:true});
				
				GEvent.addListener(marker, "dragend", 	function() {updateAddress();});
				return marker;
			}
			
			function updateAddress(){
				var geo = new GClientGeocoder();
				geo.getLocations(debut.getLatLng(), function(r){addressA = r.Placemark[0].address;});
				geo.getLocations(fin.getLatLng(), 	function(r){addressB = r.Placemark[0].address;isLocationSetted();});
			}
			
			function isLocationSetted(){
				if(polyline!=undefined) map.removeOverlay(polyline);
				document.getElementById("message").innerHTML = Math.random()+" "+addressA+" / "+addressB;
				if(addressA && addressB){
					updateDirection();
				} 
			}
			
			function updateDirection(){
				var directions = new GDirections(map);
				GEvent.addListener(directions, "load", function() {
					debut.setLatLng(debut.getLatLng());
					fin.setLatLng(fin.getLatLng());
					polyline = directions.getPolyline();
					map.addOverlay(polyline);
					
					document.getElementById("message").innerHTML += "<br />Distance : "+directions.getDistance().html;
					document.getElementById("message").innerHTML += "<br />Dur&eacute;e : "+directions.getDuration().html;
					directions.clear();
				});
				var query = "from: "+addressA+" to: "+addressB;
				document.getElementById("message").innerHTML = query;
				
				var qOptions = {locale:"fr", avoidHighways:true}; 
				directions.load(query, qOptions);
			}
			//GSearch.setOnLoadCallback(initialize);
		</script> 
	</head> 
	<body onload="initialize()" onunload="GUnload()"> 
		<div id="map_canvas" style="width: 100%; height: 600px"></div>
		<div id="route" style="width: 300px; height:180px; display:none"></div>
		<div id="message">Message</div> 
	</body> 
</html> 
